CSS Animations এবং **CSS Transitions হলো দুটি শক্তিশালী টুল যা ওয়েব ডেভেলপমেন্টে ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে সাইটে গতিশীলতা (motion) এবং পরিবর্তন (change) আনে। এই দুটি ফিচার একসাথে ব্যবহার করলে ওয়েবসাইটের ব্যবহারকারী অভিজ্ঞতা (UX) উন্নত হয় এবং ওয়েবসাইটটি আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় হয়ে ওঠে।
নিচে CSS Animations এবং CSS Transitions এর ব্যবহার এবং উদাহরণ দেওয়া হলো।
১. CSS Transitions
CSS Transition ব্যবহার করে আপনি একটি CSS property এর মানে পরিবর্তন ঘটানোর সময় একটি নির্দিষ্ট সময় (duration) ধরে অ্যানিমেশন বা পরিবর্তন ঘটাতে পারেন। এটি সাধারণত যখন কোনো ইলিমেন্টের স্টাইল পরিবর্তিত হয় তখন একটি স্মুথ ট্রানজিশন বা পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়।
CSS Transition এর সিনট্যাক্স:
selector {
transition: property duration timing-function delay;
}
- property: যে CSS প্রপার্টির জন্য ট্রানজিশন হবে (যেমন:
background-color,width,heightইত্যাদি)। - duration: ট্রানজিশনটি কত সময় নেবে (যেমন:
2s,500ms)। - timing-function: ট্রানজিশনটির গতির গতি নির্ধারণ করে (যেমন:
ease,linear,ease-in,ease-out)। - delay: ট্রানজিশন শুরু হতে কত সময় লাগবে (যেমন:
0s,1s)।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 1s ease-in-out, transform 1s ease;
}
.box:hover {
background-color: red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
ব্যাখ্যা:
.boxএরbackground-colorএবংtransformপ্রপার্টিতে ট্রানজিশন প্রয়োগ করা হয়েছে।- যখন
.box-এ হোভার করা হবে, তখন এর রঙ পরিবর্তন হবে এবং একটি ঘূর্ণন (rotate) হবে। - ট্রানজিশন ১ সেকেন্ডে হবে এবং
ease-in-outটাইমিং ফাংশন ব্যবহার করা হয়েছে।
২. CSS Animations
CSS Animations ব্যবহার করে আপনি একটি নির্দিষ্ট ইলিমেন্টের বিভিন্ন স্টাইল পরিবর্তন করতে পারেন, যা একাধিক পর্যায়ে ঘটে এবং আপনি এটি একটি নির্দিষ্ট সময়কাল ধরে নিয়ন্ত্রণ করতে পারেন। এতে @keyframes Rule ব্যবহৃত হয়, যা স্টাইলের ধাপ (steps) নির্ধারণ করে।
CSS Animation এর সিনট্যাক্স:
selector {
animation: animation-name duration timing-function delay iteration-count direction;
}
@keyframes animation-name {
from {
/* Initial state */
}
to {
/* Final state */
}
}
- animation-name: অ্যানিমেশনটির নাম।
- duration: অ্যানিমেশনটি কত সময় নেবে (যেমন:
2s,500ms)। - timing-function: অ্যানিমেশনের গতির গতি (যেমন:
ease,linear,ease-in,ease-out)। - delay: অ্যানিমেশনটি শুরু হতে কত সময় লাগবে (যেমন:
0s,1s)। - iteration-count: অ্যানিমেশনটি কতবার চলবে (যেমন:
infinite,3,1ইত্যাদি)। - direction: অ্যানিমেশনটির দিক নির্ধারণ করে (যেমন:
normal,reverse,alternate)।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
.circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
animation: moveCircle 3s ease-in-out infinite;
}
@keyframes moveCircle {
0% {
transform: translateX(0);
background-color: blue;
}
50% {
transform: translateX(200px);
background-color: red;
}
100% {
transform: translateX(0);
background-color: blue;
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
ব্যাখ্যা:
- এখানে
.circleনামক একটি বৃত্ত তৈরি করা হয়েছে। - অ্যানিমেশনটি
moveCircleনামের কিবাফ্রেম ব্যবহার করে, যা বৃত্তটিকে এক স্থান থেকে অন্য স্থানে নিয়ে যাবে এবং এর রঙ পরিবর্তন করবে। - অ্যানিমেশনটি ৩ সেকেন্ডে সম্পন্ন হবে এবং এটি বারবার (infinite) চলবে।
৩. CSS Transitions vs CSS Animations
| বৈশিষ্ট্য | CSS Transitions | CSS Animations |
|---|---|---|
| ব্যবহার | সাধারণত ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে (যেমন: hover, focus)। | নির্দিষ্ট সময়ে বা কয়েকটি ধাপে স্বয়ংক্রিয়ভাবে ঘটে। |
| স্টেপস | একে একে পরিবর্তন ঘটে। | একাধিক ধাপে পরিবর্তন ঘটে, যা @keyframes এর মাধ্যমে নিয়ন্ত্রণ করা হয়। |
| অটোমেটিক একশন | ব্যবহারকারী ইন্টারঅ্যাকশন ছাড়া কিছুই ঘটে না। | ব্যবহারকারীর ইন্টারঅ্যাকশন ছাড়া স্বয়ংক্রিয়ভাবে শুরু হয়। |
| ফ্লেক্সিবিলিটি | সীমিত, সাধারণত একক পরিবর্তনের জন্য ব্যবহৃত হয়। | আরও ফ্লেক্সিবল, একাধিক পরিবর্তন এবং জটিল অ্যানিমেশন করতে পারে। |
| অ্যানিমেশন টাইম | নির্দিষ্ট সময় ধরে পরিবর্তন ঘটে। | নির্দিষ্ট সময়ের মধ্যে একাধিক ধাপে পরিবর্তন ঘটে। |
৪. মিশ্রিত উদাহরণ: CSS Animation এবং Transition ব্যবহার
আপনি CSS Animation এবং CSS Transition একসাথে ব্যবহার করতে পারেন একাধিক ধরনের অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে। উদাহরণস্বরূপ, একটি বাটন হোভার করার সময় প্রথমে একটি ট্রানজিশন এবং পরে একটি অ্যানিমেশন শুরু হতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Example</title>
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}
button:hover {
background-color: red;
transform: scale(1.2);
}
@keyframes pulse {
0% {
box-shadow: 0 0 10px blue;
}
50% {
box-shadow: 0 0 20px red;
}
100% {
box-shadow: 0 0 10px blue;
}
}
button:active {
animation: pulse 0.5s infinite;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
ব্যাখ্যা:
- বাটনটি হোভার হলে একটি ট্রানজিশন শুরু হবে, যা বাটনের রঙ এবং সাইজ পরিবর্তন করবে।
- বাটনটি ক্লিক (active) হলে একটি অ্যানিমেশন শুরু হবে, যা বাটনের চারপাশে একটি জ্বলন্ত (pulse) ইফেক্ট তৈরি করবে।
উপসংহার
- CSS Transitions ব্যবহার করে আপনি সহজভাবে এক বা একাধিক CSS প্রপার্টির পরিবর্তনকে স্মুথ ট্রানজিশন তৈরি করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের সাথে ঘটে।
- CSS Animations আরও জটিল এবং রিচ অ্যানিমেশন তৈরি করতে সাহায্য করে, যা বিভিন্ন ধাপে এবং বিভিন্ন সময়সীমায় পরিবর্তন ঘটাতে পারে।
এই দুটি প্রযুক্তি একসাথে ব্যবহার করলে ওয়েবসাইট বা অ্যাপ্লিকেশন অনেক বেশি ই
ন্টারঅ্যাকটিভ এবং আকর্ষণীয় হয়ে ওঠে, যা ব্যবহারকারীদের ভাল অভিজ্ঞতা প্রদান করে।
Read more
